import useMyContext from "@/hooks/useContext";
import useGetState from "@/hooks/useGetState";
import { Icon } from "@iconify/react";
import { Input } from "antd";
import React, { useState } from "react";

const InputNumber = ({ value, updateModalForm }) => {
  let [count, setCount, getCount] = useGetState(value || 0);
  let { messageApi } = useMyContext();

  function updateCount(flag) {
    if (flag === "+") {
      setCount(count + 1);
    } else {
      if (count === 0) {
        messageApi.info("请不要再点了~");
      } else {
        setCount(count - 1);
      }
    }
    updateModalForm({ order_num: getCount() });
  }
  return (
    <Input
      style={{ width: "55%", userSelect: "none" }}
      placeholder="请输入"
      value={count}
      suffix={
        <React.Fragment>
          <Icon
            icon="material-symbols:add"
            fontSize={20}
            className="my-icon"
            onClick={() => {
              updateCount("+");
            }}
          />
          <Icon
            icon="ri:subtract-fill"
            fontSize={20}
            className="my-icon"
            onClick={() => {
              updateCount("-");
            }}
          />
        </React.Fragment>
      }
    ></Input>
  );
};

export default InputNumber;
